<template>
  <div class="home">
    <Left-box>
      <card scrapeDataTitle="AI告警统计">
        <AlarmTypeStatistics
          v-if="!israload"
          :showList="false"
          :showcharts="true"
        ></AlarmTypeStatistics>
        <!-- <classificationAndStatisticsOfAiAlarms v-if="!israload" /> -->
      </card>
      <card scrapeDataTitle="AI告警区域统计">
        <RegionalAIAlarmProcessing v-if="!israload" />"
      </card>
      <card scrapeDataTitle="AI告警态势分析">
        <timeAlertMessage v-if="!israload"></timeAlertMessage>
        <!-- <AIAlarmSituationAnalysis v-if="!israload" /> -->
      </card>
    </Left-box>
    <!-- 区域标签 -->
    <!-- <div class="home_label">
      <template v-for="(item, index) in locationPointArr">
        <locationLabel :options="item"></locationLabel>
      </template>
    </div> -->
    <cdialog
      :visible="dialogShow"
      :title="`未处理(${alarmInfo.name})`"
      width="600"
      @closeDialog="setDialogShow(false)"
    >
      <AlarmTypeStatisticsDialog :alarmInfo="alarmInfo" />
    </cdialog>
    <Right-box>
      <card scrapeDataTitle="近2天AI告警" style="flex: 1;">
        <AlarmTypeStatistics v-if="!israload" />
      </card>
    </Right-box>
  </div>
</template>

<script setup lang="ts">
// 首页区域标记
import locationLabel from "./components/locationPoint.vue";
import AlarmTypeStatisticsDialog from "./components/alarm_type_statistics_dialog.vue";
import RegionalAIAlarmProcessing from "./components/regional-ai-alarm-processing-statistics.vue";
import classificationAndStatisticsOfAiAlarms from "./components/classification-and-statistics-of-ai-alarms.vue";
import AIAlarmSituationAnalysis from "./components/ai-alarm-situation-analysis.vue";
import AlarmTypeStatistics from "./components/alarm-type-statistics.vue";
import { locationPoint } from "@/utils/locationPoint";
import timeAlertMessage from "./components/timeAlertMessage.vue";
import {
  onMounted,
  toRefs,
  ref,
  nextTick,
  onUnmounted,
  onUpdated,
  watch,
} from "vue";
import { UseLocation } from "@/stores/location";
import { UseHeaderName } from "@/stores/headerName";
import { UseTab } from "@/stores/tab";
import emits from "@/utils/emits";
import { UseLocationPonit } from "@/stores/locationPoint";
import { useAlarmTypeStatisticsStore } from "@/stores/slg/alarmTypeStatistics";
const { setAlarmTypeStatistics, setDialogShow } = useAlarmTypeStatisticsStore();
const { dialogShow, alarmInfo } = toRefs(useAlarmTypeStatisticsStore());
import { storeToRefs } from "pinia";
import Intraweekalarmstatistics from "../alert/components/Intraweekalarmstatistics.vue";
const { setHeaderName } = UseHeaderName();
import { useAppStore } from "@/stores/modules/app";
const { setshowMenuRight } = useAppStore();
const location = UseLocation();
const { locationPointArr } = storeToRefs(UseLocationPonit());
const data = ref();
const tab = UseTab();
const israload = ref(false);
const reload = () => {
  israload.value = true;
  nextTick(() => {
    israload.value = false;
  });
};
onUpdated(() => {
  location.SetLocationIndex(0);
});
onMounted(() => {
  setshowMenuRight();
  tab.SetTab(0);
  location.SetLocationIndex(0);
  setHeaderName("");
  emits.on("changeLocation", reload);
});
onUnmounted(() => {
  emits.off("changeLocation");
});
watch(
  () => locationPoint.value,
  (newVal) => {
    data.value = newVal;
  },
  { immediate: true, deep: true }
);
</script>

<style scoped lang="scss">
.home {
  .home_label {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 8;
  }

  &.left_box {
    &.card {
      &:nth-child(1) {
        flex: 0.32;
      }

      &:nth-child(2) {
        flex: 0.32;
      }

      &:nth-child(3) {
        flex: 0.36;
      }
    }
  }

  &.right_box {
    &.card {
      &:first-child {
        flex: 1 !important;
      }

      &:nth-child(1) {
        flex: 1 1 !important;
      }
    }
  }
}
</style>
